<template>
  <div>
    <el-button type="primary" @click="add" class="btn">添加</el-button>

    <v-list :list="list" @init="init" @update="update"></v-list>

    <v-form :info="info" @init="init" ref="f"></v-form>

    <el-pagination
      layout="prev, pager, next"
      :total="count"
      background
      :page-size="size"
      @current-change="change"
    ></el-pagination>
  </div>
</template>
<script>
import vForm from "./components/form.vue";
import vList from "./components/list.vue";
import { requserlist, requsercount } from "../../request/api";

export default {
  components: {
    vForm,
    vList,
  },
  data() {
    return {
      list: [],
      info: {
        isshow: false,
        isadd: true,
      },
      size: 2,
      page: 1,
      count: 0,
    };
  },
  methods: {
    add() {
      this.info.isshow = true;
      this.info.isadd = true;
    },
    init() {
      this.getList();
      requsercount().then((res) => {
        // console.log(res.data.list[0].total);
        this.count = res.data.list[0].total;
      });
    },
    getList() {
      requserlist({
        size: this.size,
        page: this.page,
      }).then((res) => {
        if (res.data.code == 200) {
          let list = res.data.list ? res.data.list : [];
          if (list.length == 0 && this.page != 1) {
            this.page--;
            this.getList();
            return;
          }
        }
        this.list = res.data.list ? res.data.list : [];
      });
    },
    update(uid) {
      this.info.isshow = true;
      this.info.isadd = false;
      this.$refs.f.one(uid);
    },
    change(page) {
      this.page = page;
      this.getList();
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style>
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #515a6e;
}
</style>